<template>
	<div class="tags-view">
		<div class="tabs">
			<router-link v-for="(item, index) in menu.tabList" :key="index" :to="item.path" @click="changeVal(item, index)">
				<span :class="{ tab: true, active: index === setting.activeIndex }">
					{{ item.name.indexOf('-') !== -1 ? item.name.split('-')[1] : item.name }}
					<i :class="{ iconfont: true, 'icon-del': item.path !== '/' }" @click.stop.prevent="shutdownTab(item)"></i>
				</span>
			</router-link>
		</div>
	</div>
</template>

<script setup>
import { menuStore, settingStore } from '@/store';
import { reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
const menu = menuStore();
const setting = settingStore();
const router = useRouter();

watch(
	() => menu.routePath,
	(newVal) => {
		for (let i = 0; i < menu.tabList.length; i++) {
			if (menu.tabList[i].path === newVal.path) {
				setting.activeIndex = i;
				break;
			}
		}
	},
	{}
);

const changeVal = (item, index) => {
	setting.activeIndex = index;
	const breadList = reactive([
		{
			path: '/',
			name: '首页',
		},
	]);
	if (item.name.indexOf('-') !== -1) {
		breadList.push({
			path: '',
			name: item.name.split('-')[0],
		});
		breadList.push({
			path: '',
			name: item.name.split('-')[1],
		});
	}
	const routePath = {
		path: item.path,
		name: item.name,
	};
	menu.setRoutePath(routePath);
	menu.setBreadList(breadList);
};
const shutdownTab = (item) => {
	const ret = menu.shutdownTag(item.name);
	let breadList = reactive([]);
	if (ret.path === '/') {
		breadList = reactive([
			{
				path: '/',
				name: '首页',
			},
		]);
	} else {
		breadList = reactive([
			{
				path: '/',
				name: '首页',
			},
			{
				path: '',
				name: ret.name.split('-')[0],
			},
			{
				path: '',
				name: ret.name.split('-')[1],
			},
		]);
	}

	menu.setBreadList(breadList);
	const routePath = {
		path: ret.path,
		name: ret.name,
	};
	menu.setRoutePath(routePath);
	router.push(ret.path);
};
</script>

<style lang="scss" scoped>
@import '@/assets/common/nav.scss';

.tags-view {
	width: 100%;
	.tabs {
		height: $height - 5;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-top: 1px solid #a9a9a92b;
		box-shadow: 0 5px 20px -10px darkgray;
		white-space: nowrap;
		overflow-x: scroll;
		position: relative;
		&::-webkit-scrollbar {
			display: none;
		}

		&:first-child {
			margin-left: 10px;
		}
		.tab {
			cursor: pointer;
			padding: 6px 10px;
			border: 1px solid #ddd;
			display: flex;
			border-radius: 3px;
			margin-right: 10px;
			i {
				font-size: 10px;
				z-index: 999;
				margin-left: 5px;
			}

			&:hover {
				color: #409eff;
				background-color: #ecf5ff;
			}

			.icon-active {
				font-size: 10px;
			}
		}
	}
}

.cust-active {
	width: 8px;
	height: 8px;
	margin: auto 3px;
	border-radius: 50%;
	background-color: #fff;
}

.active {
	color: #409eff;
	background-color: #ecf5ff;
}
</style>
